<template>
	<view class="content">
		<view class="content_order">
			<view class="top_tabbar">
				<text @click="handleTabbar(1)" data-val= 1 :class="{'tabber1':bannerShow1}">外卖</text>
				<text @click="handleTabbar(2)" data-val= 2 :class="{'tabber1':bannerShow2}">自提</text>
			</view>
			<view class="orderl_" @click="goPickUp">
				<view class="orderl_head">
					<p v-show="show === 1">成飞自提点1</p>
					<image v-show="show === 1" src="/static/img/arrow.png" mode=""></image>
				</view>
				<p v-show="show === 1">四川省成都市青羊区成飞公园产业园1号仓库</p>
				<view style="
				width: 667rpx;
                border: 1px dashed #E4E4E4;
                margin: 10rpx auto; " v-show="show === 1"></view>
				<view class="orderl_phone">
					<p>联系电话</p>
					<p>15112349688</p>
				</view>
			</view>
			<view class="orderl_content">
				<view class="orderl_food" v-for="item in 3" :key="item">
					<image src="../../static/img/food1.png" mode=""></image>
					<view class="orderl_foodText">
						<view class="food_text">
							<p style="font-size: 32rpx; font-weight: bold;">鱼丸汽锅鸡套餐</p>
							<p>x2</p>
						</view>
						<view class="food_text">
							<p>预订06.07</p>
						</view>
						<view class="food_text">
							<p>香辣、大份</p>
							<p style="font-weight: bold;">￥108.00</p>
						</view>
					</view>
				</view>
				<view style="
				width: 667rpx;
				border: 1px dashed #E4E4E4;
				margin: 10rpx auto; "></view>
				<view class="orderl_price">
					<view class="price1">
						<p>另需打包费：</p>
						<p>￥3</p>
					</view>
					<view class="price2">
						<p>共计：</p>
						<p>￥3230</p>
					</view>
				</view>
			</view>
			<view class="orderl_note">
				<p>备注</p>
				<u--textarea style="background: #f8f8f8;" v-model="noteOrder" placeholder="请填写您的备注哦~"></u--textarea>
			</view>
			<view class="vip_Card">
				<view class="vip">
					<view class="vip_text">
						<image src="../../static/img/vip.png" mode=""></image>
						<p>会员卡支付（可用：￥500.00）</p>
					</view>
					<view
						style="width: 32rpx;height: 32rpx;border-radius: 50%;border: 1rpx solid #818181; margin-right: 20rpx;">
					</view>
				</view>
				<view class="vip">
					<view class="vip_text">
						<image src="../../static/img/yg.png" mode=""></image>
						<p>员工卡支付（可用：￥500.00）</p>
					</view>
					<view
						style="width: 32rpx;height: 32rpx;border-radius: 50%;border: 1rpx solid #818181; margin-right: 20rpx;">
					</view>
				</view>
				<view class="vip">
					<view class="vip_text">
						<image src="../../static/img/zg.png" mode=""></image>
						<p>职工卡支付（可用：￥500.00）</p>
					</view>
					<view
						style="width: 32rpx;height: 32rpx;border-radius: 50%;border: 1rpx solid #818181; margin-right: 20rpx;">
					</view>
				</view>
				<view class="vip">
					<view class="vip_text" style="width: 25%;">
						<image src="../../static/img/vx.png" mode=""></image>
						<p>微信支付</p>
					</view>
					<view
						style="width: 32rpx;height: 32rpx;border-radius: 50%;border: 1rpx solid #818181; margin-right: 20rpx;">
					</view>
				</view>
			</view>
			<view class="subPrice">
				<view class="priceText">
					<p>合计：</p>
					<p>￥432.00</p>
				</view>
				<view class="subBox" @click="goOrder">
					立即支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerShow1: true,
				bannerShow2: false,
				customStyles1: {
					width: '188rpx',
					height: '64rpx',
					marginTop: '25rpx',
					fontSize: "28rpx",
					fontWeight: "400",
					color: '#333333',
				},
				customStyles2: {
					width: '188rpx',
					height: '64rpx',
					marginTop: '25rpx',
					fontSize: "28rpx",
					fontWeight: "400",
					color: 'white',
				},
				noteOrder: '', //备注
				show:1
			}
		},
		onLoad() {

		},
		methods: {
			handleTabbar(e) {
				console.log(e);
				if (e == 1) {
					this.bannerShow2 = false
					this.bannerShow1 = true
					this.show = e
				} else if (e == 2) {
					this.bannerShow1 = false
					this.bannerShow2 = true
					this.show = e
				}
			},
			//订单详情
			goOrder(){
				uni.navigateTo({
					url:'/homepage/orderdetails/orderdetails'
				})
			},
			//自提点
			goPickUp(){
				uni.navigateTo({
					url:'/homepage/pickUpPoints/pickUpPoints'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content_order {
		width: 710rpx;
		margin: auto;
		padding-top: 50rpx;
		padding-bottom: 30rpx;
	}

	.top_tabbar {
		display: flex;
		text-align: center;

		.waimai {
			flex: 1;
		}

		text {
			width: 355rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bolder;
			font-size: 28rpx;
			color: #333333;
		}

		.tangshi {
			flex: 1;
		}
	}

	.tabber1 {
		width: 355rpx;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 28rpx 28rpx 0rpx 0rpx;
	}

	.tabber2 {
		width: 355rpx;
		height: 100rpx;
		background: #F5F5F5;
		box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
		border-radius: 28rpx 28rpx 0rpx 0rpx;
	}

	.orderl_ {
		width: 710rpx;
		background: white;

		.orderl_head {
			display: flex;
			justify-content: space-between;
			padding: 26rpx 20rpx;

			p {
				font-size: 28rpx;
			}

			image {
				height: 17rpx;
				width: 17rpx;
			}
		}

		>p {
			font-size: 28rpx;
			padding-left: 20rpx;
		}

		.orderl_phone {
			display: flex;
			justify-content: space-between;
			padding: 16rpx 20rpx;

			p {
				font-size: 28rpx;
			}
		}
	}

	.orderl_content {
		width: 710rpx;
		margin: 10rpx auto;
		background: white;

		.orderl_food {
			width: 710rpx;
			height: 180rpx;
			background: white;
			display: flex;

			image {
				width: 172rpx;
				height: 136rpx;
				padding: 20rpx;
			}

			.orderl_foodText {


				.food_text {
					width: 185%;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					margin-top: 14rpx;
				}
			}

		}

		.orderl_price {
			width: 710rpx;
			display: flex;
			justify-content: space-between;

			.price1 {
				display: flex;
				justify-content: space-between;
				align-items: center;

				p {
					font-size: 24rpx;
				}
			}

			.price2 {
				display: flex;
				justify-content: space-between;

				p:nth-child(1) {
					font-size: 28rpx;
					font-weight: bold;
				}

				p:nth-child(2) {
					font-size: 26rpx;
					color: red;
				}
			}
		}
	}

	.orderl_note {
		width: 710rpx;
		height: 284rpx;
		margin: 50rpx auto 0rpx;
		background: white;
		overflow: hidden;

		p {
			font-size: 32rpx;
			font-weight: bold;
			margin: 15rpx 10rpx;
		}
	}

	.vip_Card {
		width: 710rpx;
		margin: 0rpx auto;
		background: white;

		.vip {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.vip_text {
				display: flex;
				justify-content: space-between;
				display: flex;
				justify-content: space-between;
				width: 65%;
				align-items: center;
				margin: 24rpx;


				image {
					width: 48rpx;
					height: 48rpx;
				}

				p {
					font-size: 28rpx;
				}
			}
		}
	}

	.subPrice {
		width: 710rpx;
		height: 116rpx;
		margin: 26rpx auto 10rpx;
		background: white;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.priceText {
			display: flex;
			justify-content: space-between;
			width: 35%;
			margin: 40rpx 30rpx;

			p:nth-child(1) {
				font-size: 32rpx;
				font-weight: bold;
			}

			p:nth-child(2) {
				font-size: 32rpx;
				font-weight: bold;
				color: red;
			}
		}

		.subBox {
			width: 288rpx;
			height: 64rpx;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			background: #5caf5d;
			font-size: 32rpx;
			text-align: center;
			line-height: 64rpx;
			color: white;
		}
	}
</style>